<template>
	<view class="count p-20">
		<view class="topName">
			<view class="xianshang">
				{{obj.name}}
			</view>
			<view class="time">
				活动时间：{{obj.start_at}}~{{obj.end_at}}
			</view>
		</view>
		<view class="activity m-t-20">
			<u-parse :html="obj.content"></u-parse>
		</view>
		<view class="btn f f-j-e f-a-b p-t-10">
			<view @click="show=true" class="lef f f-d-c f-a-c f-j-c">
				<image src="/static/home/share.png" class="imgShre"></image>
				<view class="shTit">
					分享
				</view>
			</view>
			<view @click="participate" class="btnProim">
				点击参与
			</view>
		</view>
		<!-- 弹出层 -->
		<u-popup mode="bottom" :mask-close-able="false" border-radius="30" v-model="show">
			<view class="box">
				<view class="top f f-a-c f-j-c">

					<button open-type="share" class="btns" :plain="true">
						<view @click="share" class="left f f-d-c f-a-c f-j-c m-r-80">
							<image src="/static/home/wec.png" class="wec" mode=""></image>
							<view class="wechat">
								微信好友
							</view>
						</view>
					</button>
					<button @click="circleOfFriends" class="btns" :plain="true">
						<view class="right f f-d-c f-a-c f-j-c m-l-30">
							<image src="/static/home/fied.png" class="wec" mode=""></image>
							<view class="wechat">
								朋友圈
							</view>
						</view>
					</button>
				</view>
				<view class="xian">

				</view>
				<view @click="show=false" class="off">
					关闭
				</view>
			</view>
		</u-popup>
		<!-- 下面的遮罩层 -->
		<u-mask :show="shows" @click="shows = false">
			<view class="backDian b-f f f-a-c f-j-c">
				点击 <image src="/static/dian.png" class="dian m-l-20 m-r-20" mode=""></image> 进行分享
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj: {},
				shows: false,
				content: '是DVD是v',
				show: false,
				id: 0,
				token: uni.getStorageSync('token')
			}
		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		onShow() {
			if (!this.token) {
				this.$msg('请先去登陆')
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})

				}, 1000)
			}
		},
		onLoad(options) {
			if (options.share) {
				// 通过分享链接进入小程序，进行页面跳转
				uni.switchTab({
					url: '/pages/index/index'
				})
				return
			}
			this.id = options.id
			this.initObj()
		},
		methods: {
			// 点击确认参与
			async participate() {
				if (this.obj.is_join) {
					return this.$msg('您已参与')
				}
				let n = await this.$api.ConfirmParticipation(this.id)
				this.$msg(n.message)
				setTimeout(() => {
					this.initObj()
				}, 1000)
			},
			async initObj() {
				let n = await this.$api.EventDetails(this.id)
				this.obj = n.data
			},
			// /点击分享朋友圈
			circleOfFriends() {
				this.show = false
				this.shows = true
			},
			// 点击分享
			share() {
				uni.share({
					title: '分享',
					path: '/pages/index/StoreActivity'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xianshang {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;
	}

	.time {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		margin-top: 10rpx;
	}

	.backDian {
		position: absolute;
		top: 50rpx;
		right: 50rpx;
		width: 276rpx;
		height: 70rpx;
		background: #ffffff;
		border-radius: 12rpx;

		// margin-top: 100rpx;
		.dian {
			width: 38rpx;
			height: 12rpx;
		}
	}

	.btns {
		border: none;
		padding: 0 !important;
		margin: 0 !important;
		// width: 100%;
		// height: 100%;
	}

	button {
		border: none;
		padding: 0 !important;
		margin: 0 !important;
	}

	.off {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
	}

	.xian {
		width: 750rpx;
		height: 2rpx;
		background-color: #e6e6e6;
		margin: 40rpx 0;
	}

	.wec {
		width: 96rpx;
		height: 96rpx;
	}

	.wechat {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #333333;
		margin-top: -20rpx;
	}

	.box {
		padding-top: 30rpx;
		padding-bottom: 50rpx;
	}

	.btnProim {
		width: 70%;
		height: 88rpx;
		line-height: 85rpx;
		background: #009d85;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
	}

	.shTit {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #999999;
	}

	.imgShre {
		width: 38rpx;
		height: 38rpx;
	}

	.btn {
		width: 100%;
		position: fixed;
		height: 150rpx;
		bottom: 0%;
		left: 0;
		background-color: #fff;
	}

	.count {
		height: 100vh;
		overflow-y: auto;
		padding-bottom: 150rpx;
	}
</style>